<template>
    <div class="app-container" v-if="formData != null">
        <a-card class="box-card" :cardOpen="true">
            <div slot="header">
                <span>计划基本信息</span>
            </div>
            <el-form ref="elForm" size="small" label-width="100px" label-position="left">
                <el-row :gutter="15">
                    <el-col :span="24">
                        <el-form-item label="计划标题" prop="drillTitle">
                            {{ planInfo.planTitle }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="15">
                    <el-col :span="6">
                        <el-form-item label="所属部门" prop="dept">
                            {{ planInfo.deptName }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="演练日期" prop="date">
                            {{ planInfo.planDate }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="演练地点" prop="location">
                            {{ planInfo.planLocation }}
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </a-card>
        <template v-if="dataLoaded">
            <a-card class="box-card" :style="{ marginTop: '15px' }" :cardOpen="true">
                <div slot="header">
                    <span>演练事件基本信息</span>
                </div>
                <el-form ref="elForm" :model="formData" size="medium" label-width="100px">
                    <el-row :gutter="15">
                        <el-col :span="24">
                            <el-form-item label="事件名称" prop="event_name">
                                {{ formData.eventName }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="15">
                        <el-col :span="6">
                            <el-form-item label="事件类型" prop="event_type">
                                <dict-tag :options="dict.type.usetypecode_dict" :value="formData.eventType" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="事件等级" prop="event_level">
                                <dict-tag :options="dict.type.eventlevelcode_dict" :value="formData.eventLevel" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="发生地" prop="event_location">
                                {{ formData.eventLocaltion }}
                            </el-form-item>
                        </el-col>
                        <el-col :span="6">
                            <el-form-item label="发生时间" prop="event_time">
                                {{ formData.eventTime }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="15">
                        <el-col :span="24">
                            <el-form-item label="事件简述" prop="content_title">
                                {{ formData.contentTitle }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="15">
                        <el-col :span="24">
                            <el-form-item label="影响范围" prop="impact_area">
                                {{ formData.impactArea }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="15">
                        <el-col :span="24">
                            <el-form-item label="周围环境" prop="surroundings">
                                {{ formData.surroundings }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="15">
                        <el-col :span="24">
                            <el-form-item label="事件原因" prop="event_cause">
                                {{ formData.eventCause }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </a-card>
            <a-card class="box-card" :style="{ marginTop: '15px' }" :cardOpen="true" v-if="groups.length > 0">
                <div slot="header">
                    <span>参演角色配置</span>
                </div>
                <el-form ref="elForm" :model="formData" size="medium" label-width="100px">
                    <el-row :gutter="15">
                        <el-form-item label="总指挥" prop="event_name">
                            {{ formData.plaUserName }}
                        </el-form-item>
                    </el-row>
                    <el-row :gutter="15">
                        <el-form-item label="角色分组" prop="event_name">
                            <el-row class="role-groups">
                                <div class="role-group-side">
                                    <el-tree :data="groups" ref="groupNodeList" node-key="groupId" default-expand-all check-on-click-node highlight-current @node-click="onGroupNodeClick">
                                        <span class="flow-node" slot-scope="{ node, data }">
                                            <span class="flow-label">{{ data.groupName }}</span>
                                        </span>
                                    </el-tree>
                                </div>
                                <div class="role-list">
                                    <el-table :data="currentGroup.drillPractsGroupDepts" size="mini" border :style="{ width: '100%' }">
                                        <el-table-column prop="deptName" label="所属部门"> </el-table-column>
                                        <el-table-column prop="userName" label="姓名"> </el-table-column>
                                    </el-table>
                                </div>
                            </el-row>
                        </el-form-item>
                    </el-row>
                </el-form>
            </a-card>
            <a-card class="box-card" :style="{ marginTop: '15px' }" :cardOpen="true" v-if="flowData.length > 0">
                <div slot="header">
                    <span>基础流程配置</span>
                </div>
                <el-form ref="elForm" :model="formData" size="medium" label-width="100px">
                    <el-row :gutter="15">
                        <el-col :span="24">
                            <el-form-item label="预案模板" prop="event_name">
                                {{ formData.plaPlanName }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="15">
                        <el-col :span="6">
                            <el-form-item label="响应级别" prop="event_name">
                                {{ responseLevelText }}
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row class="role-groups">
                        <div class="role-group-side">
                            <el-tree :data="flowData" ref="flowNodeList" node-key="handleId" default-expand-all check-on-click-node highlight-current @node-click="onFlowNodeClick">
                                <span class="flow-node" slot-scope="{ node, data }">
                                    <span class="flow-label">{{ data.handleName }}</span>
                                </span>
                            </el-tree>
                        </div>
                        <div class="role-list">
                            <el-form-item label="演练任务" prop="event_name">
                                <el-table :data="currentHandle.drillPractsHandleLevel.drillPractsTasks" size="mini" border :style="{ width: '100%', marginTop: '15px' }">
                                    <el-table-column prop="userName" label="执行人" width="180"> </el-table-column>
                                    <el-table-column prop="groupName" label="所属分组" width="180"> </el-table-column>
                                    <el-table-column prop="deptName" label="所属部门" width="180"> </el-table-column>
                                    <el-table-column prop="taskContent" label="任务内容"> </el-table-column>
                                    <el-table-column prop="helpContent" label="辅助信息"> </el-table-column>
                                </el-table>
                            </el-form-item>
                            <el-form-item label="检查内容" prop="event_name">
                                {{ currentHandle.drillPractsHandleLevel.checkContent }}
                            </el-form-item>
                        </div>
                    </el-row>
                </el-form>
            </a-card>

            <el-row class="drill-btns" v-if="planInfo.status == 0">
                <el-button type="success" size="medium" @click="handleEditPlan">继续编辑</el-button>
                <el-button type="primary" size="medium" v-if="planInfo.approveStatus == 3" @click="handleExecuteDrill">执行演练</el-button>
            </el-row>
        </template>

        <drill-task-edit ref="drillTaskEdit" @handleOk="onDrillTaskSave" :needMsg="false" />
    </div>
</template>
<script>
import ACard from "@/views/components/a-card/card.vue";
import * as DrillApi from "@/api/drill/drill.js";
import * as PlanApi from "@/api/plan/plan.js";
import Uploader from "@/views/components/uploader/index.vue";
import { isEmpty } from "@/utils/index";
import DrillTaskEdit from "./components/DrillTaskEdit.vue";

export default {
    name: "DrillDetail",
    components: { ACard, Uploader, DrillTaskEdit },
    dicts: ["usetypecode_dict", "eventlevelcode_dict", "drillcate_dict", "sys_dept_type_dict"],
    provide() {
        return {
            groups: () => this.groups,
        };
    },
    props: [],
    data() {
        return {
            formData: {
                planId: 0,
                contentId: 0,
                eventName: "",
                eventType: "",
                eventLevel: "",
                eventLocaltion: "",
                eventTime: "",
                contentTitle: "",
                impactArea: "",
                surroundings: "",
                eventCause: "",
                plaUser: 0,
                plaUserName: "",
                plaPlanId: 0,
                plaPlanName: "",
            },
            planInfo: {},
            groups: [],
            currentGroup: {},
            currentHandle: {
                drillPractsHandleLevel: {},
            },
            responseLevelOption: [
                {
                    label: "Ⅰ级响应",
                    value: 1,
                },
                {
                    label: "Ⅱ级响应",
                    value: 2,
                },
                {
                    label: "Ⅲ级响应",
                    value: 3,
                },
                {
                    label: "Ⅳ级响应",
                    value: 4,
                },
            ],
            staffPickType: "",
            chiefName: "",
            planId: 0,
            planTitle: "",
            flowData: [
                {
                    flowId: 1,
                    flowTitle: "组建领导小组",
                },
            ],
            activeScene: "",
            sceneTabs: [],
            currentScene: {},
            dataLoaded: false,
        };
    },
    computed: {
        responseLevelText() {
            let level = this.responseLevelOption.find(val => val.value == this.formData.responseLevel);
            return level.label;
        },
    },
    watch: {},
    created() {},
    mounted() {
        this.formData.planId = this.$route.query.planId;
        this.getPlanContent();
    },
    methods: {
        getPlanContent() {
            DrillApi.getDrillPlanInfo(this.formData.planId).then(res => {
                let data = res.data;
                this.formData = {
                    planId: data.planId,
                    contentId: data.contentId,
                    eventName: data.eventName,
                    eventType: data.eventType,
                    eventLevel: data.eventLevel,
                    eventLocaltion: data.eventLocaltion,
                    eventTime: data.eventTime,
                    contentTitle: data.contentTitle,
                    impactArea: data.impactArea,
                    surroundings: data.surroundings,
                    eventCause: data.eventCause,
                    plaUser: data.plaUser,
                    plaUserName: data.plaUserName,
                    plaPlanId: data.plaPlanId,
                    plaPlanName: data.plaPlanName,
                    responseLevel: Number(data.responseLevel),
                    status: data.status,
                };
                this.planInfo = data.drillPractsPlan;
                if (isEmpty(data.eventName) && isEmpty(data.plaUserName) && isEmpty(data.plaPlanId)) {
                    // 属于啥都没配置的，弹窗让配置
                    this.$nextTick(() => {
                        this.$alert("演练计划尚未配置内容，是否去配置？", "提醒", {
                            confirmButtonText: "去配置",
                            showClose: false,
                            callback: action => {
                                this.$tab.closePage().then(res => {
                                    this.$tab.openPage("编辑演练计划内容", "/drill/drillContentEdit", { planId: data.planId });
                                });
                            },
                        });
                    });
                    return false;
                } else {
                    this.dataLoaded = true;
                }
                this.groups = data.drillPractsGroups;
                this.flowData = data.drillPractsHandles;
                // 情景tabs
                let tabs = [];
                if (data.drillPractsScenes != null && data.drillPractsScenes.length > 0) {
                    data.drillPractsScenes.forEach((s, i) => {
                        tabs.push(Object.assign(s, { name: String(i + 1) }));
                    });
                    this.sceneTabs = tabs;
                } else {
                    this.sceneTabs = [];
                }
                this.$nextTick(() => {
                    if (data.drillPractsGroups.length > 0) {
                        let group = null;
                        if (this.currentGroup.groupId != undefined) {
                            group = data.drillPractsGroups.find(val => val.groupId == this.currentGroup.groupId);
                        }
                        if (group) {
                            this.currentGroup = group;
                        } else {
                            this.currentGroup = data.drillPractsGroups[0];
                        }
                        // 自动定位到第一个流程
                        this.$refs.groupNodeList.setCurrentKey(this.currentGroup.groupId);
                        let node = this.$refs.groupNodeList.getCurrentNode();
                        this.onGroupNodeClick(this.currentGroup, node);
                    }
                    if (data.drillPractsHandles.length > 0) {
                        let handle = null;
                        console.log(this.currentHandle.handleId, "sdfsdf");
                        if (this.currentHandle.handleId != undefined) {
                            handle = data.drillPractsHandles.find(val => val.handleId == this.currentHandle.handleId);
                        }
                        if (handle) {
                            this.currentHandle = handle;
                        } else {
                            this.currentHandle = data.drillPractsHandles[0];
                        }
                        // 自动定位到第一个流程
                        this.$refs.flowNodeList.setCurrentKey(this.currentHandle.handleId);
                        let handleNode = this.$refs.flowNodeList.getCurrentNode();
                        this.onFlowNodeClick(this.currentHandle, handleNode);
                    }
                    if (this.currentScene.sceneId == undefined) {
                        this.activeScene = "1";
                        this.currentScene = this.sceneTabs[0];
                    } else {
                        this.currentScene = this.sceneTabs.find(val => val.sceneId == this.currentScene.sceneId);
                    }
                });
            });
        },
        onGroupNodeClick(val) {
            this.currentGroup = val;
        },
        onFlowNodeClick(val) {
            this.currentHandle = val;
        },
        handleSceneChange() {
            this.currentScene = this.sceneTabs[Number(this.activeScene) - 1];
        },
        handleSceneAttachDownload(row) {
            this.download(`com/ComAttach/download/${row.attachid}`, {}, `${row.attachname}.${row.attachtype}`);
        },
        handleEditPlan() {
            this.$tab.openPage("编辑演练计划内容", "/drill/drillContentEdit", {
                planId: this.formData.planId,
            });
        },
        handleExecuteDrill() {
            // FIXME 开始执行演练后会默认派发任务，但是从日志上来看派发的任务有问题 2024年10月30日15:21:22
            this.$modal.confirm("是否确定开始执行演练？").then(() => {
                DrillApi.startDrillPlan(this.formData.planId).then(res => {
                    this.$tab.openPage("演练执行", "/drill/drillExecute", {
                        planId: this.formData.planId,
                    });
                });
            });
        },
        handleDrillTaskAdd() {
            this.$refs.drillTaskEdit.add(this.handleId);
        },
        onDrillTaskSave(data) {
            DrillApi.drillTaskSet({
                taskId: data.taskId,
                levelId: this.currentHandle.drillPractsHandleLevel.levelId,
                receiveUser: data.userId,
                groupId: data.groupId,
                taskContent: data.taskContent,
                helpContent: data.helpContent,
                sort: data.sort,
                hdTaskAttachIds: data.hdTaskAttachIds,
            }).then(res => {
                this.$modal.msgSuccess("演练任务编辑成功");
                this.getPlanContent();
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.role-groups {
    display: flex;

    .role-group-side {
        min-width: 200px;
    }

    .role-list {
        flex: 1;
        margin-left: 15px;
        box-sizing: content-box;
        overflow: hidden;
    }
}

.drill-btns {
    text-align: center;
    margin-top: 20px;
}

::v-deep {
    .el-tree-node__content {
        display: flex;

        .flow-node {
            flex: 1;
            display: flex;

            .flow-label {
                flex: 1;
                line-height: 28px;
            }

            .flow-btns {
                margin-right: 10px;
            }
        }
    }

    .el-button.tab-edit-btn {
        color: #13ce66;
        margin-left: 10px;
        font-size: 12px;
    }
}
</style>
